<template>
  <div class="app">
    <canvas ref="canvasRef" class="fullscreen-canvas"></canvas>
    <div v-if="showPlayButton" class="play-button-container">
      <button @click="togglePlay" class="play-button">
        {{ isPlaying ? '⏸️' : '▶️' }}
      </button>
    </div>
    <div v-if="countdown > 0" class="countdown-overlay">
      {{ countdown }}
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { FeatureProcessor } from './components/FeatureProcessor'
import { BackgroundLayer } from './layers/background_layer'
import { SpectralCentroidLayer } from './layers/spectral_centroid_layer'
import { CircleBarLayer } from './layers/circle_bar_layer'
import { ExplosionLayer } from './layers/explosion_layer'
import { BigStarLayer } from './layers/big_star_layer'
import { BorderLineLayer } from './layers/border_line_layer'

export default {
  name: 'App',
  setup() {
    const canvasRef = ref(null)
    const isPlaying = ref(false)
    const showPlayButton = ref(true)
    const countdown = ref(0)
    let countdownInterval = null
    const featureProcessor = new FeatureProcessor()
    let backgroundLayer = null
    let spectralCentroidLayer = null
    let explosionLayer = null
    let bigStarLayer = null
    let borderLineLayer = null
    let circleBarLayer = null
    
    onMounted(async () => {
      const canvas = canvasRef.value
      
      // Set canvas to full screen
      function resizeCanvas() {
        canvas.width = window.innerWidth
        canvas.height = window.innerHeight
        if (backgroundLayer) {
          backgroundLayer.resize(canvas.width, canvas.height)
        }
        if (spectralCentroidLayer) {
          spectralCentroidLayer.resize(canvas.width, canvas.height)
        }
        if (explosionLayer) {
          explosionLayer.resize(canvas.width, canvas.height)
        }
        if (bigStarLayer) {
          bigStarLayer.resize(canvas.width, canvas.height)
        }
        if (borderLineLayer) {
          borderLineLayer.resize(canvas.width, canvas.height)
        }
        if (circleBarLayer) {
          circleBarLayer.resize(canvas.width, canvas.height)
        }
      }
      
      // Initial resize
      resizeCanvas()
      
      // Handle window resize
      window.addEventListener('resize', resizeCanvas)
      
      // Initialize layers in specified order:
      // 1. background_layer
      // 2. spectral_centroid_layer
      // 3. explosion_layer
      // 4. big_star_layer
      // 5. border_line_layer
      // 6. circle_bar_layer
      backgroundLayer = new BackgroundLayer(canvas)
      spectralCentroidLayer = new SpectralCentroidLayer(canvas)
      explosionLayer = new ExplosionLayer(canvas)
      bigStarLayer = new BigStarLayer(canvas)
      borderLineLayer = new BorderLineLayer(canvas)
      circleBarLayer = new CircleBarLayer(canvas)
      
      // Load features
      try {
        await featureProcessor.loadFeatures()
        featureProcessor.initAudio()
        
        // Subscribe to visualization events
        featureProcessor.subscribe((event) => {
          // Update layers in specified order
          backgroundLayer.update(event)
          spectralCentroidLayer.update(event)
          explosionLayer.update(event)
          bigStarLayer.update(event)
          borderLineLayer.update(event)
          circleBarLayer.update(event)
        })
      } catch (error) {
        console.error('Failed to initialize feature processor:', error)
      }
    })
    
    onUnmounted(() => {
      // Clean up if needed
      if (countdownInterval) {
        clearInterval(countdownInterval)
      }
    })
    
    const startCountdown = () => {
      countdown.value = 3
      showPlayButton.value = false
      
      countdownInterval = setInterval(() => {
        countdown.value--
        if (countdown.value <= 0) {
          clearInterval(countdownInterval)
          startPlayback()
        }
      }, 1000)
    }
    
    const startPlayback = () => {
      isPlaying.value = true
      featureProcessor.play()
      
      if (backgroundLayer) {
        backgroundLayer.play()
      }
      if (spectralCentroidLayer) {
        spectralCentroidLayer.play()
      }
      if (explosionLayer) {
        explosionLayer.play()
      }
      if (bigStarLayer) {
        bigStarLayer.play()
      }
      if (borderLineLayer) {
        borderLineLayer.play()
      }
      if (circleBarLayer) {
        circleBarLayer.play()
      }
    }
    
    const togglePlay = () => {
      if (!isPlaying.value) {
        startCountdown()
      } else {
        isPlaying.value = false
        featureProcessor.pause()
        if (backgroundLayer) {
          backgroundLayer.pause()
        }
        if (spectralCentroidLayer) {
          spectralCentroidLayer.pause()
        }
        if (explosionLayer) {
          explosionLayer.pause()
        }
        if (bigStarLayer) {
          bigStarLayer.pause()
        }
        if (borderLineLayer) {
          borderLineLayer.pause()
        }
        if (circleBarLayer) {
          circleBarLayer.pause()
        }
        showPlayButton.value = true
        
        // 清除倒计时
        if (countdownInterval) {
          clearInterval(countdownInterval)
          countdownInterval = null
        }
        countdown.value = 0
      }
    }
    
    return {
      canvasRef,
      isPlaying,
      showPlayButton,
      countdown,
      togglePlay
    }
  }
}
</script>

<style scoped>
.app {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.fullscreen-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.play-button-container {
  position: absolute;
  bottom: 30px;
  right: 30px;
  z-index: 10;
}

.play-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  border: 2px solid white;
  color: white;
  font-size: 24px;
  cursor: pointer;
  backdrop-filter: blur(5px);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.play-button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.countdown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 120px;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 20;
}
</style>